<!DOCTYPE html>
<html>
<head>
  <title>WebGPU texImage2D test</title>
  <style type="text/css">
  .nomargin {
    margin: 0px auto;
  }
  </style>
  <script type="text/javascript" src="pixel_webgpu_util.js"></script>
  <script type="text/javascript">
    var g_swapsBeforeAck = 15;

    async function main() {
      const glCanvas = document.getElementById('canvas_gl');
      const gl = glCanvas.getContext('webgl2', {antialias: false});
      if (!gl) {
        console.error('getContext(webgl) failed');
        return null;
      }

      const gpuCanvas = document.getElementById('canvas_gpu');
      const [device, swapChain] = await webGpuUtils.init(gpuCanvas);
      if (!device || !swapChain) {
        console.error("Failed to initialize WebGPU - skipping test");
        domAutomationController.send("FAILURE");
        return;
      }

      const renderCallback = function() {
        webGpuUtils.fourColorsTest(device, swapChain, gpuCanvas.width,
                                   gpuCanvas.height);

        const tex = gl.createTexture();
        gl.bindTexture(gl.TEXTURE_2D, tex);
        gl.texImage2D(
            gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, gpuCanvas);

        const fbo = gl.createFramebuffer();
        gl.bindFramebuffer(gl.READ_FRAMEBUFFER, fbo);
        gl.framebufferTexture2D(
            gl.READ_FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0);

        gl.blitFramebuffer(0, 0, gpuCanvas.width, gpuCanvas.height, 0, 0,
                           glCanvas.width, glCanvas.height, gl.COLOR_BUFFER_BIT,
                           gl.LINEAR);

        gl.deleteFramebuffer(fbo);
        gl.deleteTexture(tex);

        waitForFinish();
      };

      window.requestAnimationFrame(renderCallback);
    }

    function waitForFinish() {
      if (g_swapsBeforeAck == 0) {
        domAutomationController.send("SUCCESS");
      } else {
        g_swapsBeforeAck--;
        window.requestAnimationFrame(waitForFinish);
      }
    }
  </script>
</head>
<body onload="main()">
  <canvas id="canvas_gl" width="200" height="200" class="nomargin"></canvas>
  <canvas id="canvas_gpu" width="200" height="200" class="nomargin"></canvas>
</body>
</html>
